<template>
  <div class="h100" style="overflow:auto">
    <load-data-spin v-if="loadingData"></load-data-spin>
    <light-timeline :items="items" v-if="items.length">
      <template slot="tag" slot-scope="{ item }">
        <p>{{ getDate(item.latestUpdateTime) }}</p>
        <p>{{ getTime(item.latestUpdateTime) }}</p>
      </template>
      <template slot="content" slot-scope="{ item }">
        <div class="line-item-cont">
          <h6 class="taskTitle">
            <span>{{ item.taskName + (item.taskType === 10 ? '[' + $t('cycleTestTask') + ']':'') || '-' }}</span>
            <span class="ecuUpdateState">{{ taskUpdateStateObj[item.taskStatus] }}</span>
          </h6>
          <ul>
            <li
              v-for="list in item.taskVehicleEcus.slice(0, item.showChild ? item.taskVehicleEcus.length : 2)"
              :key="list.id"
              class="one-part-update-item"
              :class="{fail: list.status === 8}">
              <a-row type="flex">
                <a-col flex="5 0 0" class="partCol">
                  <span class="partNumber">{{ list.ecuModuleId }}</span><span>{{ list.ecuName }}</span>
                </a-col>
                <a-col flex="3 0 0" class="partUpdateVersionCol">
                  <span>{{ list.sourceVersion }}</span>
                  <span>-></span>
                  <span>{{ list.targetVersion }}</span>
                </a-col>
                <a-col flex="2 0 0" class="lastCol">
                  <span>{{ ecuUpdateStateObj[list.status] || '-' }}</span>
                  <a @click="showEcuUpdateDetail(item,list)">{{ $t('detail') }}</a>
                </a-col>
              </a-row>
            </li>
          </ul>
          <p class="toggle" v-if="item.taskVehicleEcus.length > 2">
            <span @click="item.showChild = !item.showChild">{{ $t(item.showChild ? 'packup' : 'packdown') }}</span>
          </p>
        </div>
      </template>
    </light-timeline>
    <empty-notice v-else-if="!loadingData && items.length === 0" />
    <!-- 零件升级详情 -->
    <ecu-update-detail-dialog
      ref="ecuUpdateDetailDialogRef"
      height="70vh"
      width="80%"
      :query="dialogQuery"></ecu-update-detail-dialog>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import moment from 'moment'
import LoadDataSpin from '@/components/LoadDataSpin/Index.vue'
import EmptyNotice from '@/components/EmptyNotice/Index.vue'
import EcuUpdateDetailDialog from '@/views/components/EcuUpdateDetail/dialog.vue'
export default {
  components: {
    LoadDataSpin,
    EmptyNotice,
    EcuUpdateDetailDialog
  },
  props: {
    time: {
      type: Number,
      default: 3571593
    }
  },
  computed: {
    ...mapState({
      activeVehicleData: (state) => state.vehicle.vehicleDetail,
      ecuUpdateState: (state) => state.dict.taskEcuUpdateDictCode,
      queryParams: (state) => state.vehicle.vehicleEcuUpdateQuery
    }),
    activeVehicleId () {
      if (!this.activeVehicleData) {
        return ''
      }
      return this.activeVehicleData.id
    },
    ecuUpdateStateObj () {
      return this.$store.getters.getDictCodeObj('taskEcuUpdateDictCode')
    },
    taskUpdateStateObj () {
      return this.$store.getters.getDictCodeObj('taskUpdateDictCode')
    }
  },
  data () {
    return {
      items: [],
      loadingData: false,
      dialogQuery: null
    }
  },
  watch: {
    time: {
      handler () {
        this.getData()
      },
      immediate: true
    }
  },
  created () {
    this.getPageDictData()
  },
  methods: {
    getData () {
      this.items = []
      if (!this.activeVehicleId) {
        return
      }
      this.loadingData = true
      const query = { vehicleId: this.activeVehicleId, ...this.queryParams }
      this.$store.dispatch('getVehicleEcuTimelineData', query).then(res => {
        this.items = res.data.length ? res.data.map(item => {
          // eslint-disable-next-line no-param-reassign
          item.showChild = false
          return item
        }) : []
      }).catch((err) => {
        console.log(err)
      }).finally(() => {
        this.loadingData = false
      })
    },
    getDate (date) {
      return moment(date).format('YYYY-MM-DD')
    },
    getTime (date) {
      return moment(date).format('HH:mm')
    },
    // 查看车的某个零件所有升级情况
    showEcuUpdateDetail (task, ecu) {
      this.dialogQuery = {
        vehicleId: this.activeVehicleId,
        taskIds: task.taskId,
        ecuModuleId: ecu.ecuModuleId
      }
      this.$nextTick(() => {
        this.$refs.ecuUpdateDetailDialogRef.switchVisible(true)
      })
    },
    getPageDictData () {
      ['getTaskEcuUpdateDictCodeData', 'getTaskUpdateDictCodeData'].forEach(method => {
        this.$store.dispatch(method)
      })
    }
  }
}
</script>
<style lang="less">
.vehicleUpdateInfoCompMain {
  .line-container {
    padding-left: 6rem;
    margin:0;
    .item-tag {
      left: -6rem;
      margin-top: -8px;
      text-align: right;
    }
    .item-symbol {
      left: 2rem;
    }
    .item-circle {
      border-color:red;
      border-color: @primary-color;
      background-color: @primary-color;
      width: 12px;
      height: 12px;
      margin-left: -6px;
    }
    .line-item {
      padding: 2rem 1rem;
    }
    .line-item-cont {
      margin-top: -4px;
      padding-left: 2rem;
    }
    &:after {
      left: 8rem;
      background-color: #8fd9f9;
    }
  }
}
</style>
<style scoped lang="less">
.partNumber {
  margin-right:30px;
}
.taskTitle {
  color: @primary-color;
  &:active {
    color:#8fd9f9;
  }
  font-weight: 400;;
  font-size: 1.1em;
}
.one-part-update-item {
  line-height: 1.8em;
  color:#5E5E5E;
  &.fail {
    color:#FF8762;
  }
  .lastCol {
    display: flex;
    justify-content: space-between;
  }
  .updateCount {
    >b {
      font-weight: normal;
      margin-right: 5px;
    }
  }
}
.toggle {
  font-size:0.8em;
  color: @primary-color;
  padding-top:10px;
  cursor: pointer;
}
.ecuUpdateState {
    background-color: #8fd9f9;
    margin-left: 10px;
    color:#fff;
    font-size: 14px;
    padding:3px;
    border-radius: @border-radius-base;
  }
</style>
